<template>
  <view class="service-page">
	  <!-- 公共组件-每个页面必须引入 -->
	  <public-module></public-module>
      <div class="service-top">
		  <div class="top-item">
			  <div class="num">{{info.serviceChargeTotal}}</div>
			  <div class="text">累积服务费</div>
		  </div>
		  <div class="top-line"></div>
		  <div class="top-item">
			  <div class="num">{{info.serviceChargeNoPay}}</div>
			  <div class="text">未结算服务费</div>
		  </div>
	  </div>
	  
	  <div class="service-bank">
		  <div class="bank-title">
			  <img src="https://pic.moresu.com/Fp2aUqTs9A59tN7Ml5W_vKdWniE3" style="width:24rpx;height:24rpx;display: inline-block;vertical-align: middle;"/>
			  <span style="vertical-align: middle;padding-left:10rpx;">请按以下账号汇款</span>
			  <span style="float:right;color:#fff;font-size:12px;padding-top:5px" @click="copy">复制</span>
		  </div>
		  <div class="bank-info">
			  <u-cell-group>
			  	<u-cell title="开户名称：" :value="info.bankUserName"></u-cell>
				<u-cell title="开户银行：" :value="info.bankName"></u-cell>
				<u-cell title="开户帐号：" :value="info.bankId" :border="false"></u-cell>
			  </u-cell-group>
		  </div>
	  </div>
	  
	  <div class="service-block">
		  <div class="list-title">本月服务费明细 <span style="float:right;color: #FF5E01;font-size:24rpx;font-weight: 400;" @click="toList">查看全部 ></span></div>
		  <div class="list-div">
			  <div style="padding:60rpx 0;text-align: center;font-size:24rpx;color:#888" v-if="info.monthServiceCharge && info.monthServiceCharge.length ==0">- 暂无记录 -</div>
			  <div class="list-item" v-for="(item,index) in info.monthServiceCharge" @click="toOrderInfo(item.orderId)" :key="index">
				  <div class="left">
					  <div class="top">{{item.buyerCompanyName}}</div>
					  <div class="bottom">数量：{{item.num}}吨</div>
				  </div>
				  <div class="right">
					  <div class="top">￥{{item.serviceCharge}}</div>
					  <div class="bottom">{{item.serviceChargeState == 1 ? "已结算" : "未结算"}}</div>
				  </div>
			  </div>
		  </div>
	  </div>
	
	
	
  </view>
</template>

<script>
  import {
    serviceCharge,pageSeo
  } from '@/config/api.js'
  export default {
    data() {
      return {
        info:{}
      }
    },
    onLoad() {
     this.getInfo()
    },
	async onShow() {
	// #ifdef H5
		pageSeo({pageType: 'indexPage'}).then((res)=>{
			document.title = res.pageTitle;
		})
	// #endif
		
	},
    methods: {
		// 复制
		copy() {
			uni.setClipboardData({
				data: this.info.bankUserName + '/' + this.info.bankName +'/'+this.info.bankId,
				success: () => {
					uni.showToast({
						icon: 'none',
						title: '复制成功'
					});
				}
			});
		},
		toOrderInfo(id){
			uni.navigateTo({
			    url:'/pagesUser/business/businessOrderInfo?orderId='+id
			})
		},
		toList(){
			uni.navigateTo({
			    url:'/pagesUser/business/serviceChargeList'
			})
		},
		  getInfo(){
			  serviceCharge({thisMonth : 1}).then((res)=>{
				  this.info = res
			  })
		  }
	
      },
    }
  
</script>

<style lang="scss">
  @import '@/style/common.scss';
  .service-page{
	  padding:24rpx;
	  .service-top{
		 background: rgba(255,255,255,1);
		 border-radius: 18rpx;
		 padding:48rpx 0;
		 @include flexbox(space-around,center);
		 .top-item{
			 text-align: center;
			 .num{
				 font-size: 48rpx;
			 }
			 .text{
				 font-size: 24rpx;
				 color: #747474;
				 margin-top:10rpx;
			 }
		 }
		 .top-line{
			 width:1px;
			 height:100rpx;
			 background: #FFEBD1;
		 }
	  }
	  .service-bank{
		  margin-top:24rpx;
		  background: rgba(255,255,255,1);
		  border-radius: 18rpx;
		  overflow: hidden;
		  .bank-title{
			  background: linear-gradient(180deg, #FF5E01 0%, #FF5E01 100%);
			  color:#fff;
			  font-size:28rpx;
			  padding:16rpx 32rpx;
		  }
		  .bank-info{
			  padding:0 24rpx;
		  }
	  }
	  .service-block{
		  margin-top:24rpx;
		  background: rgba(255,255,255,1);
		  border-radius: 18rpx;
		  padding:0 24rpx;
		  .list-title{
			  font-size: 36rpx;
			  font-weight: bold;
			  line-height: 100rpx;
			  color: #070D14;
			  position: relative;
			  padding-left:32rpx;
		  }
		  .list-title::after{
			  width: 8rpx;
			  height: 38rpx;
			  background: linear-gradient(90deg, #FF5E01 0%, #FF5E01 100%);
			  border-radius: 4rpx;
			  overflow: hidden;
			  position: absolute;
			  content: " ";
			  top:33rpx;
			  left:0rpx;
		  }
		  .list-div{
			  .list-item{
				  border-top:1px solid #DFDFDF;
				  @include flexbox(space-between,center);
				  padding:24rpx 0;
				  .left{
					  .top{
						  font-size: 28rpx;
						  line-height: 40rpx;
						  color: #070D14;
					  }
					  .bottom{
						  font-size: 24rpx;
						  line-height: 40rpx;
						  color: #929292;
						  
					  }
				  }
				  .right{
					  .top{
						  font-size: 28rpx;
						  font-weight: bold;
						  line-height: 38rpx;
						  color: #FF3600;
						  text-align: right;
					  }
					  .bottom{
						  font-size: 24rpx;
						  line-height: 40rpx;
						  color: #929292;
						  text-align: right;
					  }
				  }
			  }
		  }
	  }
  }
</style>